<template>

  <div class="carousel-area">
    <div class="carousel swiper-container">




      <div class="carousel-container swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in imgList" :key="index">
          <router-link :to="/news/+item.articleId" class="swiper-slide-img">
            <picture class="v-img">
              <img :src="img(item.articleThumbnail)"/>
            </picture>
          </router-link>
        </div>
      </div>

      <div class="carousel-footer">
        <div class="carousel-mask" ref="cf_color"></div>
        <div class="carousel-tool" ref="cf_title" >
          <router-link to="/" target="_blank" ><span></span></router-link>
        </div>
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
      <div class="swiper-pagination"></div>



    </div>
  </div>







</template>

<script>
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'
import {shufflingFigure} from "@/api/web/shuffling";

export default {
  name: "shuffling",
  components: {

  },
  data() {
    return {
      imgList: [],
    }
  },
  methods:{
    /** 路径拼接 */
    img(url) {
      return process.env.VUE_APP_BASE_API + url
    },

  },
  mounted() {
    const _self =this;

    shufflingFigure().then(res=>{
      this.imgList=res.data
    }).then(function (){
      _self.mySwiper = new Swiper('.swiper-container', {
        //是否自动切换
        autoplay: true,
        //是否开启循环(loop)模式
        loop: true,
        //使用分页器导航
        pagination: {
          el: '.swiper-pagination',
          // 点击分页器切换
          clickable: true,
        },
        //设置前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        on: {
          slideChangeTransitionStart: function () {
            console.log("一共有："+_self.imgList.length)
            if(this.activeIndex>_self.imgList.length){
              console.log("复制的1")
              _self.$refs.cf_color.style="background-color:"+_self.imgList[0].imgColor
              _self.$refs.cf_title.children[0].href="/news/"+_self.imgList[0].articleId
              _self.$refs.cf_title.children[0].children[0].textContent=_self.imgList[0].articleName
            }else if(this.activeIndex == 0){
              console.log("复制的最后一张图"+this.activeIndex)
              _self.$refs.cf_color.style="background-color:"+_self.imgList[_self.imgList.length-1].imgColor
              _self.$refs.cf_title.children[0].href="/news/"+_self.imgList[_self.imgList.length-1].articleId
              _self.$refs.cf_title.children[0].children[0].textContent=_self.imgList[_self.imgList.length-1].articleName
            }else{
              console.log(this.activeIndex)
              _self.$refs.cf_color.style="background-color:"+_self.imgList[this.activeIndex-1].imgColor
              _self.$refs.cf_title.children[0].href="/news/"+_self.imgList[this.activeIndex-1].articleId
              _self.$refs.cf_title.children[0].children[0].textContent=_self.imgList[this.activeIndex-1].articleName
            }
          },
        },
      });
      //鼠标移出隐藏按钮，移入显示按钮
      _self.mySwiper.el.onmouseover=function(){
        _self.mySwiper.navigation.$nextEl.removeClass('hide');
        _self.mySwiper.navigation.$prevEl.removeClass('hide');
      }
      _self.mySwiper.el.onmouseout=function(){
        _self.mySwiper.navigation.$nextEl.addClass('hide');
        _self.mySwiper.navigation.$prevEl.addClass('hide');
      }
    })
  },

  created(){

  },


  // watch:{
  //   colorImg:{
  //     immediate:false, //初始化的时候让handler调用一下
  //     handler(newValue,oldValue){ // hander什么时候调用？什么时候改变
  //
  //       console.log("新数据")
  //       console.log(newValue)
  //       let colorthief = new ColorThief();
  //       let color= colorthief.getColor(newValue)
  //       console.log(color)
  //       this.$refs.bgColor.style="background-color:rgb("+color[0]+","+color[1]+","+color[2]+")"
  //       // colorthief.getColor()
  //       // colorthief.getPalette()
  //       // colorthief.getColorAsync()
  //       // colorthief.getImageData()
  //       // colorthief.getColorFromUrl()
  //     }
  //   }
  // }





}
</script>

<style scoped>
.swiper-container .hide{
  opacity:0;
}
.swiper-button-next,.swiper-button-prev{
  transition:opacity 0.5s;
}






.carousel-area{
  position: relative;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  z-index: 0;
}

.carousel{
  height: 100%;
}
.carousel-container{
  height: 100%;
  width:100%;
}



.swiper-slide img{
  width: 100%;
}
.swiper-slide-img{
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}
.v-img{
  position: relative;
  display: inline-block;
  line-height: 1;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  background-color: #f1f2f3;
}


.carousel-footer{
  padding: 0 16px;
}
.carousel-mask{
  background-color: rgb(87, 64, 43);

  position: absolute;
  height: 870px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  user-select: none;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(0,#2f3238 10%,transparent 20%);
}


.carousel-tool{
  color: white;
  bottom: 19px;
  left: 15px;

  position: absolute;
  margin-top: 0;
  flex-grow: 1;
  z-index: 2;
  transition: filter .3s cubic-bezier(.645,.045,.355,1);
}

.carousel-tool a{
  margin-bottom: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.carousel-tool a span{
  display: block;
  font-weight: 400;
  line-height: 25px;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



@media (min-width: 1701px) and (max-width: 2199.9px) {
  .carousel-mask{
    height: 870px;
  }
  .carousel-tool a span{
    font-size: 20px;
  }
}


@media (min-width: 1367px) and (max-width: 1700.9px){
  .carousel-mask{
    height: 810px;
  }
  .carousel-tool a span{
    font-size: 18px;
  }
}


@media (min-width: 1100px) and (max-width: 1366.9px){

  .carousel-mask{
    height: 790px;
  }
  .carousel-tool a span{
    font-size: 18px;
  }

}

@media (max-width: 1099.9px){
  .carousel-mask{
    height: 780px;
  }
  .carousel-tool a span{
    font-size: 18px;
  }

}




</style>